<template>
  <div>
    <div class="body-box">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item,key) in head_data" :key="key">
          <div :class="'edit-active-info edit-active-info'+key">
            <div class="edit-active-info-head">{{item.name}}</div>
            <div class="edit-active-info-num">{{item.num}}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="body-box">
      <window-title title="报名数据"></window-title>
      <div id="main" v-loading="load"></div>
    </div>
  </div>
</template>

<script>
import windowTitle from "../../../components/unit/title.vue";
import echarts from "echarts";

export default {
  components: { windowTitle },
  props : { id : {}},
  data() {
    return {
      head_data: [
        { name: "报名人数", num: 56 },
        { name: "活动收入", num: 56 },
        { name: "退款金额", num: 56 },
        { name: "浏览量", num: 56 }
      ],
      load:true
    };
  },
  mounted(){
    this.getPanInfo();
    this.getLineData();
  },
  methods:{
    //获取活动面板数据
    getPanInfo(){
      this.ajaxs('active/activeEditBase',{
        data : {id : this.id},
        success:(res) => {
          this.head_data[0].num = res.msg.sign_user;
          this.head_data[1].num = res.msg.total_in;
          this.head_data[2].num = res.msg.return_price;
          this.head_data[3].num = res.msg.browse;
        }
      });
    },
    //获取折线图数据
    getLineData(){
      this.load = true;
      this.ajaxs('active/editBaseLine',{
        data:{id : this.id},
        success:(res) => {
          this.load = false;
          this.drawLine(res.msg[0],res.msg[1]);
        }
      });
    },
      //折线图
    drawLine(data_x,data_y) {
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        color:['#8a70c6'],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#8a70c6"
            }
          }
        },
        grid: {
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data:data_x
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: '报名数据',
            type: "line",
            stack: "总量",
            areaStyle: {},
            data:data_y,
            lineStyle: {
              color: "#ff763b",
              opacity: 0.3
            },
            areaStyle: {
              color: "#ff763b",
              opacity: 0.3
            },
          }
        ]
      });
    },
  }
};
</script>

<style>
#main,#main1{
    width: 100%;
    height: 400px;
}
.edit-active-info {
  width: 100%;
  height: 100px;
  border-radius: 3px;
  overflow: hidden;
  background: #78cbb7;
  color: #fff;
}
.edit-active-info-head {
  height: 30px;
  color: #fff;
  line-height: 30px;
  font-size: 14px;
  padding: 0 10px;
  border-bottom: 1px dashed #fff;
}
.edit-active-info1{
  background: #fec85c !important;
}
.edit-active-info2{
  background: #54b7f0;
}
.edit-active-info3{
  background: #f87863;
}
.edit-active-info-num {
  height: 70px;
  line-height:70px;
  padding: 0 20px;
  font-size: 18px;
}
</style>